<template>
  <section id='foot_guide'>
    <section @click="gotoAddress({path: '/mallIndex'})" class="guide_item">
      <span :class="{'UrlActive':$route.path.indexOf('mallIndex') !== -1}" class="icon_style iconfont icon-shouye"></span>
      <span :class="{'UrlActive':$route.path.indexOf('mallIndex') !== -1}">首页</span>
    </section>
    <section @click="gotoAddress({path:'/statusIndex'})" class="guide_item" v-if="userType==1">
      <span :class="{'UrlActive':$route.path.indexOf('statusIndex') !== -1}" class="icon_style iconfont icon-dingdan3"></span>
      <span :class="{'UrlActive':$route.path.indexOf('statusIndex') !== -1}">状态监控</span>
    </section>
    <section @click="gotoAddress('/orderIndex')" class="guide_item" v-if="userType==1">
      <span :class="{'UrlActive':$route.path.indexOf('orderIndex') !== -1}" class="icon_style iconfont icon-dingdan2"></span>
      <span :class="{'UrlActive':$route.path.indexOf('orderIndex') !== -1}">维护派单</span>
    </section>
    <section @click="gotoAddress('/getOrderIndex')" class="guide_item"  v-else>
      <span :class="{'UrlActive':$route.path.indexOf('getOrderIndex') !== -1}" class="icon_style iconfont icon-dingdan2"></span>
      <span :class="{'UrlActive':$route.path.indexOf('getOrderIndex') !== -1}">维护接单</span>
    </section>
    <section @click="gotoAddress('/myIndex')" class="guide_item">
      <span :class="{'UrlActive':$route.path.indexOf('myIndex') !== -1}" class="icon_style iconfont icon-yonghu"></span>
      <span :class="{'UrlActive':$route.path.indexOf('myIndex') !== -1}">我的</span>
    </section>
  </section>
</template>

<script>
  import {mapState} from 'vuex'
  export default {
    data() {
      return {}
    },
    created() {

    },
    mounted() {
			// console.log(this.userType)

    },
    computed: {
      // ...mapState([
      //   'userType'
      // ]),
			userType(){
				return sessionStorage.getItem('UserType')
			}
    },
    methods: {
      gotoAddress(path) {
        this.$router.replace(path)
      }
    },

  }

</script>

<style lang="scss" scoped>
  @import '../../style/mixin';

  .UrlActive{
    color: #ED1709!important;
  }

  #foot_guide {
    background-color: #fff;
    position: fixed;
    z-index: 100;
    left: 0;
    right: 0;
    bottom: 0;
    @include wh(100%, 2.2rem);
    display: flex;
    box-shadow: 0 -0.026667rem 0.053333rem rgba(0, 0, 0, .1);
  }

  .guide_item {
    flex: 1;
    display: flex;
    text-align: center;
    flex-direction: column;
    align-items: center;

    .icon_style {
      margin-top: .3rem;
      font-size: 1rem;
    }

    span {
      // @include sc(.45rem, #666);
      @include sc(.45rem,#869AA3);
    }
  }

</style>
